<script setup lang="ts">
import type {KeyValue} from "~/types";

const formDefault = {
  page:1,
  perpage:50,
  total:1,
  includes: '',
  includes_type: [],
  excludes: '',
  excludes_type: [],
  domain_length_min: '',
  domain_length_max: '',
  suffix: '',//后缀
  prefix: '',//前缀
  combine: '',//组合
  delete_date: '',
  delete_type: [],
  create_year: '',
  exclude_my:'',
  domain_check:[],
  domain_attr:[],
}
let form = ref(formDefault);
/**
 * 域名类型
 */
let typeList = ref<Array<KeyValue>>([
  {value: 1, label: '过期域名'},
  {value: 2, label: '高搜狗PR'},
  {value: 3, label: '高权重'},
  {value: 4, label: '高百度收录'},
  {value: 5, label: '高搜狗收录'},
  {value: 6, label: '有建站历史'},
  {value: 7, label: '0元预定'},
])
/**
 * 域名包含
 */
let typeWithList = ref<Array<KeyValue>>([
  {value: 1, label: '开头'},
  {value: 2, label: '结尾'},
  {value: 3, label: '开头或结尾'},
])
let deleteTypeList=ref<Array<KeyValue>>([
  {value: 1, label: 'delete'},
  {value: 2, label: 'sna-pre'},
  {value: 3, label: 'jm-pre'},
  {value: 4, label: 'xw-pre'},
  {value: 5, label: 'name-pre'},
  {value: 6, label: 'netcn-pre'},
  {value: 7, label: 'other-pre'},
  {value: 8, label: 'en-pre'},
  {value: 9, label: 'xb-pre'},
  {value: 10, label: 'gname-pre'},
])
/**
 * 域名后缀
 *
 */
let suffixWithList = ref<Array<KeyValue>>([
  {value: '', label: '不限'},
  {value: 1, label: '.com'},
  {value: 2, label: '.net'},
  {value: 3, label: '.cc'},
  {value: 4, label: '.top'},
  {value: 5, label: '.vip'},
  {value: 6, label: '.xyz'},
  {value: 7, label: '.cn'},
  {value: 8, label: '.com.cn'},
  {value: 9, label: '.net.cn'},
  {value: 10, label: '.org.cn'},
  {value: 11, label: '.省级.cn'},
  {value: 12, label: '其他后缀'},
  {value: 13, label: '国际'},
  {value: 14, label: '国内'},
])
let createYearList:Array<KeyValue>=(()=>{
  let year=new Date().getFullYear();
  let arr=[];
  for(let i=year;i>2000;i--){
    arr.push({label:`${i}年以前`,value:i});
  }
  return arr;
})();
let excludeMyList=ref<Array<KeyValue>>([
  {value: 1, label: '排除我已预定域名'},
  {value: 2, label: '只查我已预定域名'},
  {value: 3, label: '排除我已收藏域名'},
  {value: 4, label: '只查我已收藏域名'},
  {value: 5, label: '排除已预定和收藏'},
])
const handleSelectionChange=()=>{

};
let batchList=ref<Array<KeyValue>>([
  {label:'批量预定',value:1},
  {label:'批量收藏',value:1},
  {label:'取消收藏',value:1},
  {label:'批量导出',value:1},
])
const handleCommand=()=>{

}
</script>

<template>
  <div class="content-box">
    <div class="content">
      <div class="bg-white">
        <div class="flex justify-between header">
          <div>
            <el-button-group>
              <el-button v-for="item in typeList">{{ item.label }}</el-button>
            </el-button-group>
          </div>
          <div>
            <el-button class="mr-1" style="vertical-align: bottom;">
              <icon class=""></icon>
              管理我的设置
            </el-button>
            <el-dropdown>
              <el-button type="primary">
                快速查询<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-form label-suffix="：" class="form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="域名包含">
                <el-input type="text" placeholder="多个用,分割"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-checkbox-group
                    v-model="form.includes_type">
                  <el-checkbox v-for="item in typeWithList" :label="item.value" :key="item.value">{{ item.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="域名排除">
                <el-input type="text" placeholder="多个用,分割"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-checkbox-group
                    v-model="form.excludes_type">
                  <el-checkbox v-for="item in typeWithList" :label="item.value" :key="item.value">{{ item.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="域名长度">
                <el-row :gutter="0" class="w-full">
                  <el-col :span="11">
                    <el-select v-model="form.domain_length_min" placeholder="不限" filterable clearable>
                      <el-option label="不限" value=""></el-option>
                      <el-option
                          v-for="item in 39"
                          :key="item+1"
                          :label="item+1"
                          :value="item+1">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="2">
                    <div class="text-center">-</div>
                  </el-col>
                  <el-col :span="11">
                    <el-select v-model="form.domain_length_max" filterable clearable placeholder="不限">
                      <el-option label="不限" value=""></el-option>
                      <el-option
                          v-for="item in 38"
                          :key="item+2"
                          :label="item+2"
                          :value="item+2">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="域名后缀">
                <el-select v-model="form.suffix" placeholder="不限" filterable clearable>
                  <el-option
                      v-for="item in suffixWithList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="域名构成">
                <el-select v-model="form.suffix" placeholder="不限" filterable clearable>
                  <el-option
                      v-for="item in suffixWithList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结果排序">
                <el-select v-model="form.suffix" placeholder="默认" filterable clearable>
                  <el-option
                      v-for="item in suffixWithList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="删除日期">
                <el-date-picker
                    v-model="form.delete_date"
                    type="date"
                    placeholder="删除日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="删除类型">
                <el-select multiple collapse-tags  :max-collapse-tags="2" v-model="form.delete_type" filterable clearable>
                  <el-option
                      v-for="item in deleteTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册日期">
                <el-select placeholder="不限" v-model="form.create_year" filterable clearable>
                  <el-option :label="item.label" :value="item.value" :key="item.value" v-for="item in createYearList"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-row :gutter="20" class="w-full">
                  <el-col :span="1"><el-checkbox></el-checkbox></el-col>
                  <el-col :span="20">
                    <el-select placeholder="不限" v-model="form.exclude_my" filterable clearable>
                      <el-option :label="item.label" :value="item.value" :key="item.value" v-for="item in excludeMyList"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="域名属性">
                <el-checkbox-group
                    v-model="form.includes_type">
                  <el-row :gutter="10" class="w-full">
                    <el-col :span="4" v-for="item in 10" >
                      <el-row :gutter="10">
                        <el-col :span="10" style="vertical-align: bottom;margin-bottom: 5px;">
                          <el-checkbox :label="item.value" :key="item.value"><span style="line-height: 24px;">{{ item.label||'搜狗PR' }}</span></el-checkbox>
                        </el-col>
                        <el-col :span="14">
                          <el-select placeholder="不限" v-model="form.exclude_my" filterable clearable>
                            <el-option :label="item.label" :value="item.value" :key="item.value" v-for="item in excludeMyList"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="域名检测">
                <el-checkbox-group
                    v-model="form.includes_type">
                  <el-row :gutter="10" class="w-full">
                    <el-col :span="4" v-for="item in 10" >
                      <el-row :gutter="10">
                        <el-col :span="10" style="vertical-align: bottom;margin-bottom: 5px;">
                          <el-checkbox :label="item.value" :key="item.value"><span style="line-height: 24px;">{{ item.label||'搜狗PR' }}</span></el-checkbox>
                        </el-col>
                        <el-col :span="14">
                          <el-select placeholder="不限" v-model="form.exclude_my" filterable clearable>
                            <el-option :label="item.label" :value="item.value" :key="item.value" v-for="item in excludeMyList"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="text-center">
                <el-dropdown @command="handleCommand" style="vertical-align: bottom;">
                  <el-button type="primary">
                    批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="item.value" v-for="item in batchList">{{ item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button type="primary" style="margin-left:10px;">查询</el-button>
                <el-button>重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="desc">
        本次共查询出 [ <span class="text-[var(--el-color-primary)]">1590678</span> ] 条记录,您现在在查看第 <span class="text-[var(--el-color-primary)]">{{form.page}}</span>页的数据，本页显示第{{(form.page-1)*form.perpage+1}}-{{form.page*form.perpage }}条数据
      </div>
      <div class="bg-white">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column property="name" label="域名" sortable />
          <el-table-column property="name" label="长度" sortable />
          <el-table-column label="域名简介" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="估价" sortable/>
          <el-table-column property="address" label="原注册" sortable/>
          <el-table-column property="name" label="删除时间" sortable />
          <el-table-column property="name" label="操作">
            <template #default="scope">
              <el-button class="text-">收藏</el-button>
              <el-button>查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <MyPage v-model:page="form.page" v-model:perpage="form.perpage" v-model:total="form.total"></MyPage>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.bg{
  background-color: #eeeeee;
}
.bg-white{
  background-color: white;
  padding: 20px;
}
.content-box{
  @extend .bg;
  width: 100%;
  padding: 20px;
}
.content{
  width: 1200px;
  margin: 0 auto;
}

.form {
  margin: 10px 0;
}
.desc{
  margin: 20px 0;
}
</style>